<template>
	<div class="activeInputNumber">
		<div class="inputNumber1">
			<h3>基础用法</h3>
			<el-input-number v-model="num1" @change="handleChange" :min="1" :max="10"></el-input-number>
		</div>
		<div class="inputNumber2">
			<h3>禁用状态 -disabled</h3>
			<el-input-number v-model="num2" :disabled="true"></el-input-number>
		</div>
		<div class="inputNumber3">
			<h3>步数-step</h3>
			<el-input-number v-model="num3" :step="3"></el-input-number>
		</div>
		<div class="inputNumber4">
			<h3>尺寸-medium、small、mini(配合size使用,例:size="small")</h3>
			<el-input-number v-model="num4" size="modium"></el-input-number>
			<el-input-number v-model="num4" size="small"></el-input-number>
			<el-input-number v-model="num4" size="mini"></el-input-number>
		</div>
		<div class="inputNumber5">
			<h3>按钮位置-controls-position(left|right)</h3>
			<el-input-number controls-position="right" v-model="num5"></el-input-number>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				num1: 1,
				num2: 1,
				num3: 1,
				num4: 1,
				num5:2,
			}
		},
		methods: {
			handleChange(value) {
				console.log(value);
			}
		}
	}
</script>

<style>

</style>